<!--
 * @Author: icymoon911 icymoon911@163.com
 * @Date: 2024-11-04 20:29:22
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-11-05 20:25:45
 * @FilePath: \web\src\components\FormList\components\AutoInput\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div flex>
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearch"
      popper-class="my-autocomplete"
      class="w-inherit!"
      @select="handleSelect"
      v-bind="controlAttrs"
      v-on="controlOn"
      @input="handleInput"
    >
      <template #default="{ item }">
        <div class="value">{{ item.value }}</div>
        <span class="link">{{ item.remark }}</span>
      </template>
    </el-autocomplete>
    <template v-for="(item, i) in btns" :key="i">
      <el-button ml-5 v-bind="item.controlAttrs" v-on="item.controlOn">{{
        item.text
      }}</el-button>
    </template>
  </div>
</template>

<script setup lang="ts">
import { Edit } from "@element-plus/icons-vue";

// 定义选项
defineOptions({
  name: "AutoInput",
});

interface LinkItem {
  value: string;
  remark: string;
}

const props = defineProps({
  modelValue: {
    type: String,
    default() {
      return null;
    },
  },
  controlAttrs: {
    type: Object,
    required: true,
    default() {
      return {};
    },
  },
  controlOn: {
    type: Object,
    default() {
      return {};
    },
  },
  btns: {
    type: Array,
    default() {
      return [];
    },
  },
});

const state = ref("");
const links = ref<LinkItem[]>([]);

const emit = defineEmits(["update:modelValue"]);

watch(
  state,
  () => {
    emit("update:modelValue", state.value);
  },
  { immediate: true, deep: true }
);

const querySearch = (queryString: string, cb) => {
  if (!(queryString || "").trim()) {
    cb([]);
  } else {
    const results = queryString
      ? // ? links.value.filter(createFilter(queryString))
        links.value.filter(
          (item) =>
            item.value.indexOf(queryString) >= 0 || (item.remark || '').indexOf(queryString) >= 0
        )
      : links.value;
    // call callback function to return suggestion objects

    // emit("update:modelValue", results);
    cb(results);
  }
};

const createFilter = (queryString) => {
  return (restaurant) => {
    debugger;
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0;
  };
};

const handleSelect = (item: LinkItem) => {
  console.log(item);
};

const handleInput = (val) => {
  emit("customerInput", val);
};

onMounted(() => {
  links.value = props.controlAttrs.loadAll;
});
</script>

<style>
.my-autocomplete li {
  line-height: normal;
  padding: 7px;
}
.my-autocomplete li .name {
  text-overflow: ellipsis;
  overflow: hidden;
}
.my-autocomplete li .addr {
  font-size: 12px;
  color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
  color: #ddd;
}
</style>
